<%@ page contentType="text/html; charset=UTF-8" language="java" isErrorPage="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送私信</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/logo.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
    <!-- 头部导航栏 -->
    <%@ include file="../header.jsp"%>
    <!-- 消息导航栏-->
    <section class="bg-white shadow-sm">
            <div class="container">
                <div class="nav-scroller bg-white">
                    <nav class="nav nav-underline">
                        <li class="nav-link text-muted" href="#">消息中心</li>
                        <a class="nav-link active" href="/message/list">私信</a>
                        <a class="nav-link" href="/message/send">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mouse" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8V5a4 4 0 0 0-8 0v6a4 4 0 0 0 8 0zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
                            </svg>发送私信
                        </a>
                    </nav>
                </div>
        </div>
    </section>

    <!-- 发送消息 -->
    <section>
        <div class="container">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h6 class="border-bottom border-gray pb-2 mb-0">
                    发送私信
                </h6>
            <form class="mt-3" id="sendmessageform">
                <div class="form-group row">
                    <label for="inputFriendname" class="col-sm-2 col-form-label">收件人:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="inputFriendname" name="friendName" placeholder="username" value="${friendname}">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputContent" class="col-sm-2 col-form-label">内容:</label>
                    <div class="col-sm-8" id="editor">
                        <div id="div1"></div>
                        <textarea class="form-control" id="inputContent" name="content" placeholder="content" rows="5" hidden></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                        <button type="button" id="send" class="btn btn-primary mb-2 text-center">发送</button>
                        <span class="pl-2" id="result"></span>
                    </div>
                </div>
            </form>

            </div>
        </div>
    </section>


    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
    <!-- 引入富文本编辑器.js -->
    <script type="text/javascript" src="/js/wangEditor.min.js"></script>
    <script type="text/javascript">
        const E = window.wangEditor
        const editor = new E('#div1')
        const $text1 = $('#inputContent')
        editor.config.focus = false
        editor.config.onchange = function (html) {
            // 第二步，监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor.create()

        // 第一步，初始化 textarea 的值
        $text1.val(editor.txt.html())
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#send").click(function () {
                var friendName = $('[name=friendName]').val();
                var content = $('[name=content]').val();
                var messsage = {
                    friendName : friendName,
                    content : content,
                };
                $.ajax({
                    type:"POST",
                    contentType:"application/json;charset=utf-8",
                    url:"/message/send",
                    data : JSON.stringify(messsage),
                    dataType:'JSON',
                    success:function (data) {
                        if (data.status){
                            $("#result").addClass("text-success");
                            $("#result").text("发送成功,3s之后将跳转到聊天详情页");
                            $("#InputFriendname").text("");
                            $("#InputContent").text("");
                            setInterval(function () {
                                location.href = '/message/viewdetail?friendname='+friendName;
                            }, 3000);
                        }else{
                            $("#result").addClass("text-danger");
                            $("#result").text(data.message);
                        }
                    },
                    error:function (e) {
                        alert("错误了");
                    }
                });
            });
        });
    </script>
    <script src="/js/message.js"></script>
</body>
</html>